<template>
    <el-dialog :visible.sync="isShow" width="800px" title="设置配送员">
      <el-row>
        <el-col :span="24">
          商户：{{ shopInfo.name }}
          <el-table :data="shopInfo.riderList" row-key="id" tooltip-effect="dark" max-height='800' style="width: 100%;margin-top:10px">
                <el-table-column prop="id" label="ID" show-overflow-tooltip></el-table-column>
                <el-table-column prop="nickname" label="姓名" show-overflow-tooltip></el-table-column>
                <el-table-column prop="phone" label="电话" show-overflow-tooltip></el-table-column>
                <el-table-column label="操作" show-overflow-tooltip>
                    <template slot-scope="scope">
                        <el-button type="text" icon="el-icon-delete" @click="deleteAction(scope.$index)"></el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-col>
        <el-col :span="24">
          <el-button type="text" icon="el-icon-circle-plus-outline" @click="addRidersAction">新增配送员</el-button>
        </el-col>
        <el-col :span="24">
          <div style="margin-top: 30px;width: 100%;display: flex;flex-direction: row;justify-content: flex-end;">
            <el-button type="primary" @click="submitForm('itemModel')">保存</el-button>
            <el-button @click="close" type="info" size="mini">关闭</el-button>
          </div>
        </el-col>
        <RecordDialog ref="RecordDialog" @rowClick="rowClick"></RecordDialog>
      </el-row>
    </el-dialog>
</template>
    
  <script>
    import RecordDialog from '@/components/RecordDialog/index'
    import { operateActionPost } from '@/api/interface/operate.js'
    export default {
      components: {
        RecordDialog
      },
      data() {
        return {
          isShow: false,
          shopInfo: {}
        }
      },
      created(){
        
      },
      methods:{
        show(){
          this.isShow = true
        },
        close(){
            this.isShow = false
        },
        addRidersAction(){
          this.$refs.RecordDialog.formKey = 'user'
          this.$refs.RecordDialog.show()
        },
        deleteAction(index){
          var riderList = this.shopInfo.riderList || []
          riderList.splice(index, 1)
          this.shopInfo.riderList = riderList
        },
        rowClick(val){
          var riderList = this.shopInfo.riderList || []
          var findObj = riderList.find((rider)=>{
              return rider.id == val.id
            })
          if(findObj){
            this.$message({
              message: '该用户已存在',
              type: 'info'
            })
            return
          }
          riderList.push(val)
          this.$set(this.shopInfo, 'riderList', riderList)
        },
        submitForm(){
          var riderList = this.shopInfo.riderList || []
          var ids = []
          riderList.map((item)=>{
            ids.push(item.id)
          })
          operateActionPost('/api/merchant/shop/updateAction/', {
            obj_id: this.shopInfo.id,
            riders: ids
          }).then((res) => {
            if(res.data.code == 10000){
              this.$message({
                message: '保存成功',
                type: 'success'
              })
              this.close()
            }
          })
        },
      }
    }
    </script>
    
    <style lang="scss" scoped>
  
    </style>
    